<template>
  <!-- 表单 -->
  <el-form ref="addForm" :model="formData" :rules="rules" label-width="120px">
  <el-form-item label="姓名" prop="username">
    <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" />
  </el-form-item>
  <el-form-item label="手机" prop="mobile">
    <el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" />
  </el-form-item>
  <el-form-item label="入职时间" prop="timeOfEntry">
    <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择入职时间" />
  </el-form-item>
  <el-form-item label="聘用形式" prop="formOfEmployment">
    <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择" >
        <el-option :label="item.value" :value="item.id"
         v-for="item in hire" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="工号" prop="workNumber">
    <el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" />
  </el-form-item>
  <el-form-item label="部门" prop="departmentName">
    <el-input v-model="formData.departmentName" @focus="focus"  style="width:50%" placeholder="请选择部门" >    
    </el-input>
    <div>
           <el-tree :data="list" v-if="show"  @node-click="handleNodeClick" :props="{label:'name'}" ></el-tree>
 
        </div>
  </el-form-item>
  <el-form-item label="转正时间" prop="correctionTime">
    <el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择转正时间" />
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="hSubmit">确定</el-button>
  <el-button @click="hCancel" >取消</el-button>
</el-form-item>
</el-form>
</template>

<script>

import hire from "@/constant/employees";
import { addDepartments} from "@/api/Organization";
import { addsDepartments} from "@/api/departments";
import { tranDataToTree} from "@/utils";
export default ({
    name:'emp',
    data() {
        
        return {
            show:false,
            list:[],//部门列表数据
           hire:hire.hireType,
    formData: {
      username: '',         // 用户名
      mobile: '',           // 手机号
      formOfEmployment: '', // 聘用形式
      workNumber: '',       // 工号
      departmentName: '',   // 部门
      timeOfEntry: '',      // 入职时间
      correctionTime: ''    // 转正时间
    },
    rules: {
  username: [
    { required: true, message: '用户姓名不能为空', trigger: 'blur'},
    { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }
  ],
  mobile: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  formOfEmployment: [
    { required: true, message: '聘用形式不能为空', trigger: 'blur' }
  ],
  workNumber: [
    { required: true, message: '工号不能为空', trigger: 'blur' }
  ],
  departmentName: [
    { required: true, message: '部门不能为空', trigger: 'change'}
  ],
  timeOfEntry: [
    { required: true, message: '请选择入职时间', trigger: 'blur' }
  ]
}
        };
    },
   
    methods:{
      // 重置表单
      reset(){
        this.$refs.addForm.resetFields()
      },
      // 新增员工
    async  loadsDepartments(){
        try {
          const  res = await addsDepartments(this.formData)
          console.log(res);
          this.$emit('renderer')
        } catch (error) {
          console.log(error);
        }
      },
      // 树形点击
       handleNodeClick(data) {
        console.log(data);
        if(data.children.length===0){
          this.formData.departmentName=data.introduce
          this.show=false
        }else{
          return
        }
      },
        // 焦点
        focus(){
            this.show=true,
            this.formation()
        },
        // 部门列表
         async  formation(){
        const res = await addDepartments()
        // console.log(res);
        res.data.depts.shift()
        this.list= tranDataToTree(res.data.depts) 
        
      },
        // 取消
        hCancel(){
            this.$emit('close');
        },
        // 确定
        hSubmit(){
          this.$refs.addForm.validate((valid)=>{
            if(!valid)  return
            this.loadsDepartments()
            // this.$emit('close');
          })
        },
    }
})
</script>
